<template>
  <view class="addBank">
    <i-formItem title="姓名" :border="false">
      <input type="text" placeholder="请输入姓名" v-model="formData.realName" />
    </i-formItem>
    <i-formItem title="身份证" :border="false">
      <input
        type="text"
        placeholder="请输入身份证号"
        v-model="formData.identityNumber"
      />
    </i-formItem>
    <i-formItem title="银行卡名称" :border="false">
      <input
        type="text"
        placeholder="请输入银行卡名称"
        v-model="formData.bankName"
      />
    </i-formItem>
    <i-formItem title="银行卡号" :border="false">
      <input
        type="text"
        placeholder="请输入银行卡号"
        v-model="formData.bankcardNum"
      />
    </i-formItem>
    <i-formItem title="提现人手机号" :border="false">
      <input
        type="text"
        placeholder="请输入提现人手机号"
        v-model="formData.cashMobile"
      />
    </i-formItem>
    <view style="margin: 24rpx 0">
      <i-buttons
        @click="addBank"
        radius="48rpx"
        padding="18rpx 36rpx"
        color="#fff"
        bgColor="linear-gradient( 90deg, #FFB413 0%, #FF9A00 100%)"
      >
        {{ formData.id ? "修改" : "添加" }}</i-buttons
      >
    </view>
  </view>
</template>
<script lang="ts" setup>
import { reactive, watch, defineProps, defineEmits } from "vue";
import { phoneReg, idCardReg, bankReg } from "../../../utils/regs";
import { checkForm, checkFormData, clearForm } from "../../../utils/common";
const emit = defineEmits(["addBank"]);
const props = defineProps({
  editBankData: {
    type: Object,
    default: () => {},
  },
});

const formData = reactive({
  bankcardNum: "",
  cashMobile: "",
  realName: "",
  identityNumber: "",
  bankName: "",
  id: "",
});
const addBank = async () => {
  try {
    await checkFormData(formData, {
      realName: [{ require: true, message: "请输入提现人姓名" }],
      bankName: [{ require: true, message: "请输入银行名称" }],
      bankcardNum: { reg: bankReg, message: "请输入正确银行卡号" },
      cashMobile: { reg: phoneReg, message: "请输入正确提现人手机号" },
      identityNumber: { reg: idCardReg, message: "请输入正确身份证号" },
    });
    
    // 显示确认弹窗
    uni.showModal({
      title: "确认添加",
      content: "添加成功后，提现方式不可再编辑，是否确认添加？",
      success: (res) => {
        if (res.confirm) {
          emit("addBank", formData);
        }
      }
    });
  } catch (error) {}
};

watch(
  () => props.editBankData,
  (value) => {
    console.log(value);
    
    if (value && Object.keys(value).length > 0) {
      formData.id = value.id;
      formData.bankcardNum = value.bankcardNum;
      formData.cashMobile = value.cashMobile;
      formData.realName = value.realName;
      formData.identityNumber = value.identityNumber;
      formData.bankName = value.bankName;
    } else {
      clearForm(formData)
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
.addBank {
  width: 100%;
  padding: 24rpx;
  box-sizing: border-box;
}
</style>
